﻿<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--The viewport meta tag is used to improve the presentation and behavior
  of the samples on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Web Map Viewer</title>

  <link rel="stylesheet" href="http://jsapi.thinkgis.cn/esri/css/esri.css">
  <link rel='stylesheet' href='css1/layout.css'>

  <script>var dojoConfig = { parseOnLoad: true };</script>
  <script src="http://jsapi.thinkgis.cn/init.js"></script>
  <script>
      dojo.require('esri.arcgis.Portal');
      dojo.require('esri.arcgis.utils');//从ArcGIS.com实用程序方法与内容。
      dojo.require("esri.map");
      dojo.require('esri.dijit.Attribution'); //属性

      var portal, items;
      var webmaps = [], map, currentMap = 0;
    //  var i18n;

      function init() {
          portal = new esri.arcgis.Portal('http://www.arcgis.com');//创建portal
          dojo.connect(portal, 'onLoad', loadPortal);//portal加载事件
      }

      function loadPortal() {
          //query the group and retrieve the Web Maps.
          var params = {
              q: 'title:Community Basemaps AND owner:esri'
          };//查询条件
          portal.queryGroups(params)//群组查询，延迟
            .then(function (response) {//执行函数
                if (response.results.length > 0) {//判断结果是否为0
                    var group = response.results[0];
                    var queryParams = {
                        q: 'type:"Web Map" -type:"Web Mapping Application"',
                        num: 10
                    };
                    group.queryItems(queryParams)//组内项目查询
                      .then(function (response) {
                          if (response.results.length > 0) {
                              items = response.results;
                              //load the first map 
                              createMap(items[0]);//创建地图
                              //create thumbnail gallery 
                              createThumbs(items);//创建缩略图画廊
                          } else {
                              console.log('This group does not contain any public web maps to display.');
                              esri.hide(dojo.byId('loadingImg'));//隐藏
                          }

                      });
                } else {
                    esri.hide(dojo.byId('loadingImg'));//隐藏
                }
            });
      }

      function createMap(item) {
          var mapDeferred = esri.arcgis.utils.createMap(item.id, dojo.create('div', {
              id: item.id
          }, dojo.byId('mainMap')), {
              mapOptions: {
                  showAttribution: true,
                  slider: false
              }
          });//创建地图
          mapDeferred.then(function (response) {//设置地图信息
              map = response.map;
              map.id = item.id;
              map.title = item.title;
              map.owner = item.owner;//所有者
              map.snippet = item.snippet;//描述
              webmaps[currentMap] = map;

              updateDetails(map);//更新地图
              esri.hide(dojo.byId('loadingImg'));//隐藏
          }, function (error) {
              if (map) {
                  map.destroy();
                  dojo.destroy(map.container);
                  getNext();
              }
          });
      }

      function createThumbs(items) {//创建缩略图画廊
          var frag = document.createDocumentFragment();//创建文档表示
          dojo.forEach(items, function (item, index) {
              if (item.id) {
                  var thumbnail = item.thumbnailUrl || 'https://static.arcgis.com/images/desktopapp.png'; //use default image if one is not provided
                  var li = dojo.create('li', {
                      innerHTML: '<img src="' + thumbnail + '"/><p class="ellipsis">' + item.title + '</p>'

                  }, frag);
                  dojo.addClass(li, 'grid_2 gallery_grid');// 添加项目样式
              }
              dojo.connect(li, 'onclick', function () {//单击显示隐藏地图
                  //close the thumbnail panel 
                  hideMap();//关闭
                  esri.hide(dojo.byId('thumbnailContainer'));//隐藏
                  currentMap = index;//索引
                  showMap();显示
              });
          });
          dojo.place(frag, 'thumbnailList');//替换
      }

      function showMap() {
          //animate the display of the next map to fade-in 
          //increment the map count div
          var myMap = webmaps[currentMap];//根据索引创建地图
          if (myMap && myMap.id) {
              var node = dojo.byId(myMap.id);
              esri.show(node);
              updateDetails(myMap);
              //淡入
              var anim = dojo.fadeIn({
                  node: node
              });
              anim.play();
          } else {
              //create the map 
              esri.show(dojo.byId('loadingImg'));
              createMap(items[currentMap]);
          }
      }
      //更新一些细节
      function updateDetails(item) {
          dojo.byId('mapTitle')
            .innerHTML = item.title;
          dojo.byId('mapOwner')
            .innerHTML = item.snippet;
          dojo.byId('mapCount')
            .innerHTML = dojo.string.substitute(
            "Map ${page} of  ${total}", {
                page: (currentMap + 1),
                total: items.length
            });
      }
      //淡出前面的地图
      function hideMap() {
          //Fade out the previous map 
          var node = dojo.byId(webmaps[currentMap].id);
          esri.hide(node);
          dojo.byId('mapTitle').innerHTML = '';
          dojo.byId('mapOwner').innerHTML = '';
          dojo.byId('mapCount').innerHTML = '';
          //淡出动画
          var anim = dojo.fadeOut({
              node: node
          });
          anim.play();
      }

      function getNext() {
          //hide the existing map 
          hideMap();
          (currentMap >= -1 && currentMap < (items.length - 1)) ? currentMap += 1 : currentMap = 0;
          showMap();
      }

      function getPrevious() {
          hideMap();
          (currentMap <= items.length && currentMap > 0) ? currentMap -= 1 : currentMap = items.length - 1;
          showMap();
      }
      //切换画廊
      function toggleGallery() {
          var tc = dojo.byId('thumbnailContainer');
          tc.style.display === 'none' ? esri.show(tc) : esri.hide(tc);
      }

      dojo.ready(init);
  </script>
</head>

<body>
<div class='container_12'>
<div  id='mapSection' class='grid_12 rounded'>
  <div id='mainMap' >
 <div id='thumbnailContainer' class='gallery-thumbs-container' style='display:none;'>
<div id='thumbnailList' class='container_12 gallery-thumbs-list'></div>
 </div>
     <img id="loadingImg" alt="" src="images/loading.gif" style="position:absolute; right:50%; top:50%; z-index:100;display:none;"/>                
    <div class="gallery-nav">
        <div class="gallery-nav-right" onclick='getNext();'></div>
        <div class="gallery-nav-left" onclick='getPrevious();'></div>
    </div>
  </div>
  </div>
  
  <div class='clear' ></div>   
  <div id='detailsSection' class='grid_12 rounded'>
  <div class='grid_9 alpha'>
    <div class='pod' style='padding-left:10px;'>
      <div id='mapTitle' class='title' ></div>
      <div class='subtitle' id='mapOwner'></div>
    </div>
  </div>

  <div class='grid_3 omega'>
    <div class='pod'>
      <div id='mapCount' class='subtitle'></div>
    </div>
  </div>
      <div>
         <div id='thumbs' class='gallery-thumb' onclick='toggleGallery();'></div>
  </div> 
  </div>

</div>
</body>
</html>